<template>
    <div>
        <component v-for="(item, index) in htmlPreviewDataList" :key="index" :style="item.data.style" :is="item.render.type" :data="item.data"></component>
    </div>
</template>
<script>
    import 'normalize.css/normalize.css'
    import './../style/index.scss'
    import Vue from 'vue'
    import { basicComponents } from "@/components/basicComponents"
    import '@/function.js'

    Object.getOwnPropertyNames(basicComponents).forEach(function (name) {
        const component = basicComponents[name];
        Vue.component(component.render.type, () => component.render.component)
    });
    import FormLabels from "@/components/basic/form/components"
    FormLabels.forEach(function (component) {
        Vue.component(component.render.type, () => component.render.component)
    });
    export default  {
        props: {
            htmlPreviewDataList: Array,
            autoSync: Boolean,
            sqId: String,
        },
        data(){
            return {
                dataHash : '',
            }
        },
        mounted() {
            let _this = this;
            if(this.autoSync && this.sqId !== ''){
                setInterval(() => {
                    _this.$post('/page-json/' + _this.sqId, {}).then((data) => {
                        if (_this.dataHash !== data.hash){
                            _this.htmlPreviewDataList = data.data
                        }
                        _this.dataHash = data.hash
                    })
                }, 2500)
            }
        }
    }
</script>